<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录界面</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/jsp/admin/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/jsp/admin/css/style.css" />

<script
	src="${pageContext.request.contextPath }/jsp/admin/js/jquery-1.7.2.min.js"
	type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$('#login').click(function() {
			var name_state = $('#name');
			var psd_state = $('#psd');
			var name = $('#name').val();
			var psd = $('#psd').val();
			if (name == '') {
				name_state.parent().next().next().css("display", "block");
				return false;
			} else if (psd == '') {
				name_state.parent().next().next().css("display", "none");
				psd_state.parent().next().next().css("display", "block");
				return false;
			} else {
				name_state.parent().next().next().css("display", "none");
				psd_state.parent().next().next().css("display", "none");
				$('.login').submit();
			}
		});
		$('#register').click(
				function() {
					var name_r_state = $('#name_r');
					var psd_r_state = $('#psd_r');
					var affirm_psd_state = $('#affirm_psd');
					var name_r = $('#name_r').val();
					var psd_r = $('#psd_r').val();
					var affirm_psd = $('#affirm_psd').val();
					if (name_r == '') {
						name_r_state.parent().next().next().css("display",
								"block");
						return false;
					} else if (psd_r == '') {
						psd_r_state.parent().next().next().css("display",
								"block");
						return false;
					} else if (affirm_psd == '') {
						affirm_psd_state.parent().next().next().css("display",
								"block");
						return false;
					} else if (psd_r != affirm_psd) {
						return false;
					} else {
						$('.register').submit();
					}
				})
	})

	function ok_or_errorBylogin(l) {
		var content = $(l).val();
		if (content != "") {
			$(l).parent().next().next().css("display", "none");
		}
	}

	function ok_or_errorByRegister(r) {
		var affirm_psd = $("#affirm_psd");
		var psd_r = $("#psd_r");
		var affirm_psd_v = $("#affirm_psd").val();
		var psd_r_v = $("#psd_r").val();
		var content = $(r).val();
		if (content == "") {
			$(r).parent().next().next().css("display", "block");
			return false;
		} else {
			$(r).parent().next().css("display", "block");
			$(r).parent().next().next().css("display", "none");
			if (psd_r_v == "") {
				$(psd_r).parent().next().css("display", "none");
				$(psd_r).parent().next().next().css("display", "none");
				$(psd_r).parent().next().next().css("display", "block");
				return false;
			}
			if (affirm_psd_v == "") {
				$(affirm_psd_v).parent().next().css("display", "none");
				$(affirm_psd_v).parent().next().next().css("display", "none");
				$(affirm_psd_v).parent().next().next().css("display", "block");
				return false;
			}
			if (psd_r_v == affirm_psd_v) {
				$(affirm_psd).parent().next().css("display", "none");
				$(affirm_psd).parent().next().next().css("display", "none");
				$(psd_r).parent().next().css("display", "none");
				$(psd_r).parent().next().next().css("display", "none");
				$(affirm_psd).parent().next().css("display", "block");
				$(psd_r).parent().next().css("display", "block");
			} else {
				$(affirm_psd).parent().next().css("display", "none");
				$(affirm_psd).parent().next().next().css("display", "none");
				$(psd_r).parent().next().css("display", "none");
				$(psd_r).parent().next().next().css("display", "none");
				$(psd_r).parent().next().css("display", "block");
				$(affirm_psd).parent().next().next().css("display", "block");
				return false;
			}
		}
	}

	function barter_btn(bb) {
		$(bb).parent().parent().fadeOut(1000);
		$(bb).parent().parent().siblings().fadeIn(2000);
	}
</script>
</head>
<body class="login_body">

	<div class="login_div">
		<div class="col-xs-12 login_title">登录</div>
		<form action="${pageContext.request.contextPath}/login"
			class="login" method="post">
			<div class="nav">
				<div class="nav login_nav">
					<div class="col-xs-4 login_username">用户名:</div>
					<div class="col-xs-6 login_usernameInput">
						<input type="text" name="name" id="name" value=""
							placeholder="&nbsp;&nbsp;学号/手机号"
							onblur="javascript:ok_or_errorBylogin(this)" />
					</div>
					<div class="col-xs-1 ok_gou">√</div>
					<div class="col-xs-1 error_cuo">×</div>
				</div>
				<div class="nav login_psdNav">
					<div class="col-xs-4">密&nbsp;&nbsp;&nbsp;&nbsp;码:</div>
					<div class="col-xs-6">
						<input type="password" name="password" id="psd" value=""
							placeholder="&nbsp;&nbsp;密码"
							onBlur="javascript:ok_or_errorBylogin(this)" />
					</div>
					<div class="col-xs-1 ok_gou">√</div>
					<div class="col-xs-1 error_cuo">×</div>
				</div>
				<div class="nav login_jue">
					<div class="col-xs-4">登录角色：</div>
					<div class="col-xs-6">
						<input type="radio" name="role" value="user" checked="checked">&nbsp;&nbsp;普通用户
						&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="radio" name="role" value="admin">&nbsp;&nbsp;管理员
					</div>
				</div>
				<div class="col-xs-12 login_btn_div">
					<input type="submit" class="sub_btn" value="登录" id="login" />
				</div>
			</div>
		</form>
		<br>
		<div id="error">
			<label>${requestScope.error}</label>
		</div>
		<div class="col-xs-12 barter_btnDiv">
			<button class="barter_btn" onClick="javascript:barter_btn(this)">没有账号?前往注册</button>
		</div>
	</div>
	<div class="register_body">
		<div class="col-xs-12 register_title">注册(请先选注册角色)</div>
		<form action="${pageContext.request.contextPath}/login/register.do"
			class="register" method="post">
			<div class="nav">
				<div class="nav register_nav">
					<div class="col-xs-2">姓名:</div>
					<div class="col-xs-3">
						<input type="text" name="name" id="name_r" value=""
							placeholder="&nbsp;&nbsp;用户名"
							onBlur="javascript:ok_or_errorByRegister(this)" />
					</div>
					<div class="col-xs-1 ok_gou">√</div>
					<div class="col-xs-1 error_cuo">×</div>
					<div class="col-xs-2">手机号:</div>
					<div class="col-xs-3">
						<input type="text" name="phone" id="name_r" value=""
							placeholder="&nbsp;&nbsp;手机号"
							onBlur="javascript:ok_or_errorByRegister(this)" />
					</div>
					<div class="col-xs-1 ok_gou">√</div>
					<div class="col-xs-1 error_cuo">×</div>
				</div>
				<div class="nav register_psdnav">
					<div class="col-xs-2">邮&nbsp;&nbsp;&nbsp;箱:</div>
					<div class="col-xs-3">
						<input type="text" name="email" id="psd_r" value=""
							placeholder="&nbsp;&nbsp;邮箱"
							onBlur="javascript:ok_or_errorByRegister(this)" />
					</div>
					<div class="col-xs-1 ok_gou">√</div>
					<div class="col-xs-1 error_cuo">×</div>
					<div class="col-xs-2">县&nbsp;&nbsp;&nbsp;区:</div>
					<div class="col-xs-3">
						<input type="ssxq" name="ssxq" id="psd_r" value=""
							placeholder="&nbsp;&nbsp;宛城区"
							onBlur="javascript:ok_or_errorByRegister(this)" />
					</div>
					<div class="col-xs-1 ok_gou">√</div>
					<div class="col-xs-1 error_cuo">×</div>
				</div>
				<div class="nav register_affirm">
					<div class="col-xs-2">担任职务:</div>
					<div class="col-xs-3">
						<input type="text" name="zhiwu" id="affirm_psd" value=""
							placeholder="&nbsp;&nbsp;"
							onBlur="javascript:ok_or_errorByRegister(this)" />
					</div>
					<div class="col-xs-1 ok_gou">√</div>
					<div class="col-xs-1 error_cuo">×</div>
					<div class="col-xs-2" id="yyt1">营业厅:</div>
					<div class="col-xs-3" id="yyt2">
						<input type="text" name="yyt" id="affirm_psd" value=""
							placeholder="&nbsp;&nbsp;"
							onBlur="javascript:ok_or_errorByRegister(this)" />
					</div>
					<div class="col-xs-2" style="display: none;" id="zwgs1">装维公司:</div>
					<div class="col-xs-3" style="display: none;" id="zwgs2">
						<input type="text" name="zwgs" id="affirm_psd" value=""
							placeholder="&nbsp;&nbsp;中移铁通"
							onBlur="javascript:ok_or_errorByRegister(this)" />
					</div>
					<div class="col-xs-1 ok_gou">√</div>
					<div class="col-xs-1 error_cuo">×</div>

					

				</div>
				<div class="nav register_affirm" style="display: none;" id="pq">
					<div class="col-xs-2">所属片区:</div>
					<div class="col-xs-3">
						<input type="text" name="sspq" id="affirm_psd" value=""
							placeholder="市区-太平庄社区-B-城市"
							onBlur="javascript:ok_or_errorByRegister(this)" />
					</div>
					<div class="col-xs-1 ok_gou">√</div>
					<div class="col-xs-1 error_cuo">×</div>
				</div>
				<div class="nav login_jue cc">
					<div class="col-xs-4">注册角色：</div>
					<div class="col-xs-6">
						<input type="radio" name="role" value="user" checked="checked">&nbsp;&nbsp;前台人员
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input
							type="radio" name="role" value="defend">&nbsp;&nbsp;维护人员
					</div>
					<script type="text/javascript">
						$(function() {
							$(":radio").click(function() {
								if($(this).val()=='user'){
									$("#pq").hide();
									$("#zwgs1").hide();
									$("#zwgs2").hide();
									$("#yyt1").show();
									$("#yyt2").show();
								}else{
									$("#yyt1").hide();
									$("#yyt2").hide();
									$("#pq").show();
									$("#zwgs1").show();
									$("#zwgs2").show();
								}
							});
						});
					</script>
				</div>
				<div class="col-xs-12 register_btn_div">
					<input type="submit" class="sub_btn" value="注册" id="register" />
				</div>
			</div>
		</form>
		<div class="col-xs-12 barter_register">
			<button class="barter_registerBtn"
				onClick="javascript:barter_btn(this)" style="">已有账号?返回登录</button>
		</div>
	</div>

</body>
</html>